{% extends "auth-menu.html" %}
{% block head %}

{#  没有需要加载的文件#}
 {% endblock %}

{% block display %}
    "display: block"
{% endblock %}

{% block active %}
    'active'
{% endblock %}

{% block active_sub1 %}
    'active'
{% endblock %}

{% block main %}
   <div class='span12'>
        <div class='page-header'>
            <h1 class='pull-left'>
                <i class='icon-edit'></i>
                <span>接口获取频次</span>
            </h1>
            <div class='pull-right'>
                <ul class='breadcrumb'>
                    <li>
                        <a href="/index"><i class='icon-bar-chart'></i>
                        </a>
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li>
                        接口获取
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li class='active'>接口获取频次</li>
                </ul>
            </div>
        </div>
    </div>

<form accept-charset="UTF-8" class="navbar-search pull-left hidden-phone" method="get" />
    <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
    时间： <input type="text"  value="{{ date }}" name="date" id="datetimepicker"  />
      客户名：  <input type="text" name="kehu" value={{ kehu }} />
      数据版本：
                        <select id='inputSelect' name="version">
                            <option {{ select_16q2 }}/>16Q2
                            <option {{ select_15q4 }}/>15Q4
                            <option {{ select_dti }}/>DTI
                        </select>

<button class="btn btn-link icon-search" name="button" type="submit"></button>
{#<input autocomplete="off" class="search-query span2" id="q_header" name="q" placeholder="Search..." type="text" value="" />#}
</form>



<div id="main1" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">

var Chart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据

    Chart1.showLoading({
        text: '正在努力的读取数据中...'
    });

    option = {
   color: [
        '#ff7f50'],
    tooltip : {
    trigger: 'axis',
    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    }
        },
    title:{
        'text' : {{ kehu_title|safe }},
    },
    legend: {
        data:['获取频次']
        },

    toolbox : {
    'show':true,
    orient : 'vertical',
    x: 'right',
    y: 'center',
    'feature':{
{#    'mark':{'show':true},#}
    'dataView':{'show':true,'readOnly':false},
    'magicType':{'show':true,'type':['line','bar']},
    'restore':{'show':true},
    'saveAsImage':{'show':true}
            }
        },
    calculable : true,

    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis : [
            {
    type : 'category',
    data : {{ x | safe }}
            }
        ],
    yAxis : [
            {
    type : 'value'
    }
        ],
    series : [

            {
    name:'访问记录',
    type:'bar',

    data:{{ y  }},

            },
    ]
    };
    Chart1.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart1.hideLoading();
    </script>

{#    <script src="./jquery.js"></script>#}
{#<script src="build/jquery.datetimepicker.full.js"></script>#}

{% endblock %}

{% block script %}
{#<script src="/bootstrap/js/jquery.js"></script>#}

<script>

$.datetimepicker.setLocale('ch');

{#$('#datetimepicker_format').datetimepicker({format: $("#datetimepicker_format_value").val()});#}
{#console.log($('#datetimepicker_format').datetimepicker('getValue'));#}

$("#datetimepicker_format_change").on("click", function(e){
	$("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({format: $("#datetimepicker_format_value").val()});
});
$("#datetimepicker_format_locale").on("change", function(e){
	$.datetimepicker.setLocale($(e.currentTarget).val());
});

$('#datetimepicker').datetimepicker({
dayOfWeekStart : 1,
lang:'ch',

format:"Y-m-d H:i",
{#disabledDates:['1986/01/08','1986/01/09','1986/01/10'],#}
{#startDate:	'1986/01/05'#}
});
{#$('#datetimepicker').datetimepicker({value:{{ date|date:"Y-m-d H:i" }}, step:10});#}
$('#datetimepicker').datetimepicker({ step:10});
</script>

{% endblock %}